<template>
  <div class="page-content">
    <binTable
      :tableColumnProps="tableColumnProps"
      :listData="pageList"
      :listCount="pageListCount"
      v-model:page="pageInfo"
    >
      <!-- 学生学号 -->
      <template #stu_num="scope">
        <el-link @click="handleShowDetail(scope)">{{ scope.row.stu_num }}</el-link>
      </template>
      <!-- 头像图片 -->
      <template #avatar="scope">
        <el-image
          style="width: 40px; height: 40px"
          :src="scope.row.avatar"
          fit="fill"
          hide-on-click-modal
          preview-teleported
          :initial-index="scope.index"
          :preview-src-list="avatarSrcList"
        >
          <template #error>
            <div style="height: 100%; background: #409eff; color: #fff; font-size: 20px">
              <span style="line-height: 38px; text-align: center">{{
                String(scope.row.name).charAt(0)
              }}</span>
            </div>
          </template>
        </el-image>
      </template>
      <!-- 用户角色 -->
      <template #role="scope">
        <el-tag :type="userRole === 0 ? 'warning' : userRole === 1 ? '' : 'success'">
          {{ userRole === 0 ? '管理员' : userRole === 1 ? '教师' : '学生' }}
        </el-tag>
      </template>
      <!-- 用户状态 -->
      <template #state="scope">
        <el-switch
          v-model="scope.row.state"
          style="--el-switch-off-color: #ff4949"
          class="ml-2"
          inline-prompt
          active-text="启"
          inactive-text="禁"
          :disabled="scope.row.id === store.state.userModule.userInfo.id ? true : false"
          @change="handleSwitch(scope.row)"
        />
      </template>
      <!-- 操作按钮 -->
      <template #handle="scope">
        <el-button link type="primary" :icon="Edit" @click="handleEditClick(scope.row)">编辑</el-button>
        <el-button link type="danger" :icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </binTable>
    <!-- 用户-学生-详细信息对话框 -->
    <el-dialog
      v-model="detailDialog"
      title="详情"
      width="30%"
    >
    <div class="userDetail">
      <div class="avatar">
        <el-avatar :size="60" shape="square" :src="userDetail.avatar" /><br>
        <el-tag style="margin: 8px 0 0 8px" type="success">学生</el-tag>
      </div>
      <div class="info">
        <p>姓名：{{ userDetail.name }}</p>
        <p>学号：{{ userDetail.stu_num }}</p>
        <p>学院：{{ userDetail.college }}</p>
        <p>专业：{{ userDetail.major }}</p>
        <p>班级：{{ userDetail.class }}</p>
        <p>性别：{{ userDetail.gender }}</p>
        <p>层次：{{ userDetail.level }}</p>
        <p>入学时间：{{ userDetail.admission_date }}</p>
        <p>联系方式：{{ userDetail.phone }}</p>
        <p>电子邮箱：{{ userDetail.email }}</p>
      </div>
    </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="detailDialog=false">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { Delete, Edit } from '@element-plus/icons-vue';
import { computed, ref, watch } from 'vue'
import { useStore } from 'vuex'
import binTable from '@/base-ui/table'
import { binMsg } from '@/global/api.js'

const props = defineProps({
  // table 的配置文件
  tableColumnProps: {
    type: Object,
    required: true
  },
  // 用户角色（根据这个请求不同角色的数据）
  userRole: {
    type: Number,
    required: true
  },
})
const store = useStore()
const detailDialog = ref(false) // 详细信息对话框
const userDetail = ref({})      // 用户详细信息

// 转递给 table 组件的分页数据
const pageInfo = ref({
  page_num: 1,
  page_size: 10
})
const emit = defineEmits(['pageInfoChange', 'handleEditClick'])

// 当页数发生变化，就通知父组件查询数据
watch(
  () => pageInfo.value,
  (newVal) => {
    emit('pageInfoChange', newVal)
  },
  {
    immediate: true
  }
)

// 数据列表
const pageList = computed(() => store.getters['userManageModule/userList'](props.userRole))

// 数据列表数量
const pageListCount = computed(() => store.getters['userManageModule/userListCount'](props.userRole))

// 获取头像链接列表
const avatarSrcList = computed(() => store.getters['userManageModule/userAvatarSrcList'](props.userRole))

// 刷面刷新，第一次根据name（空值）进行查询，后面则根据查询条件和分页参数进行查询
const getPageList = async (formValue, pageInfo) => {
  binMsg().closeAll()
  // 非模糊查询的选项，都需要输入内容
  if (formValue.label !== 'name' && formValue.label !== 'major' && formValue.label !== 'college') { 
    if (formValue.value === '') {
      return binMsg('warning', '请输入查询内容！')
    }
  }
  // 查找用户数据
  store.dispatch('userManageModule/searchUserAction', { ...formValue, ...pageInfo, })
}

// 修改用户状态
const handleSwitch = (row) => {
  binMsg().closeAll()
  store.dispatch('userManageModule/updateUserState', { role: props.userRole, id: row.id })
}

// 点击编辑，发出事件给父组件
const handleEditClick = async (row) => {
  emit('handleEditClick', row)
}

// 删除用户
const handleDelete = (row) => {
  binMsg().closeAll()
  if (store.state.userModule.userInfo.id === row.id) {
    return binMsg('warning', '不可以删除自己哦~')
  }
  store.dispatch('userManageModule/deleteUserByIdAction', { role: row.role, id: row.id })
}

// 显示学生详细信息
const handleShowDetail = (scope) => {
  detailDialog.value = true
  userDetail.value = scope.row
}

defineExpose({
  getPageList
})
</script>

<style lang="less" scoped>
.userDetail {
  display: flex;
  .avatar {
    margin-top: 15px;
  }
  .info {
    font-size: 16px;
    margin-left: 40px;
  }
}
</style>
